#! /bin/bash

NAME=$1

FILE_PATH=$(cd "$(dirname "${BASH_SOURCE[0]}")/../packages" && pwd)

re="[[:space:]]+"

if [ "$#" -ne 1 ] || [[ $NAME =~ $re ]] || [ "$NAME" == "" ]; then
  echo "Usage: pnpm gc \${name} with no space"
  exit 1
fi

DIRCNAME="$FILE_PATH/components"
DIRNAME="$DIRCNAME/$NAME"
DIRSTYLE="$FILE_PATH/theme-chalk"
INPUT_NAME=$NAME

if [ -d "$DIRNAME" ]; then
  echo "$NAME component already exists, please change it"
  exit 1
fi

NORMALIZED_NAME=""
for i in $(echo $NAME | sed 's/[_|-]\([a-z]\)/\ \1/;s/^\([a-z]\)/\ \1/'); do
  C=$(echo "${i:0:1}" | tr "[:lower:]" "[:upper:]")
  NORMALIZED_NAME="$NORMALIZED_NAME${C}${i:1}"
done
NAME=$NORMALIZED_NAME

input_string=$NAME
first_letter=$(echo "${input_string:0:1}" | tr '[:upper:]' '[:lower:]')
result="${first_letter}${input_string:1}"

mkdir -p "$DIRNAME"
mkdir -p "$DIRNAME/src"
mkdir -p "$DIRNAME/style"
mkdir -p "$DIRNAME/__tests__"

cat > $DIRNAME/src/$INPUT_NAME.vue <<EOF
<template>
  <div :class="ns.b()">
    <hc-button type="primary">button</hc-button>
    <div>
      <slot />
    </div>
  </div>
</template>

<script lang="ts" setup>
import HcButton from '@hicor-ui/components/button'
import { useNamespace } from '@hicor-ui/hooks'
import { ${result}Emits, ${result}Props } from './$INPUT_NAME'

defineOptions({
  name: 'Hc$NAME',
})

const ns = useNamespace('$INPUT_NAME')
const props = defineProps(${result}Props)
const emit = defineEmits(${result}Emits)

// init here
</script>
EOF

cat > $DIRNAME/src/$INPUT_NAME.ts <<EOF
import { isNil } from 'lodash-unified'
import { buildProps, definePropType, isString } from '@hicor-ui/utils'
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@hicor-ui/constants'

import type { ExtractPropTypes } from 'vue'
import type $NAME from './$INPUT_NAME.vue'

export const ${result}Props = buildProps({
  predefine: {
    type: definePropType<string[]>(Array),
  },
  /**
   * @description whether to trigger form validation
   */
  validateEvent: {
    type: Boolean,
    default: true,
  },
} as const)

export const ${result}Emits = {
  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),
  [CHANGE_EVENT]: (val: string | null) => isString(val) || isNil(val),
  activeChange: (val: string | null) => isString(val) || isNil(val),
  focus: (event: FocusEvent) => event instanceof FocusEvent,
  blur: (event: FocusEvent) => event instanceof FocusEvent,
}

export type ${NAME}Props = ExtractPropTypes<typeof ${result}Props>
export type ${NAME}Emits = typeof ${result}Emits
export type ${NAME}Instance = InstanceType<typeof $NAME>
EOF

cat > $DIRNAME/style/css.ts <<EOF
import '@hicor-ui/components/base/style/css'
import '@hicor-ui/theme-chalk/hc-$INPUT_NAME.css'
EOF

cat > $DIRNAME/style/index.ts <<EOF
import '@hicor-ui/components/base/style'
import '@hicor-ui/theme-chalk/src/$INPUT_NAME.scss'
EOF

cat <<EOF >"$DIRNAME/index.ts"
import { withInstall } from '@hicor-ui/utils'
import $NAME from './src/$INPUT_NAME.vue'

export const Hc$NAME = withInstall($NAME)
export default Hc$NAME

export * from './src/$INPUT_NAME'
EOF

cat > $DIRNAME/__tests__/$INPUT_NAME.test.tsx <<EOF
import { mount } from '@vue/test-utils'
import { describe, expect, test } from 'vitest'
import $NAME from '../src/$INPUT_NAME.vue'

const AXIOM = 'Rem is the best girl'

describe('$NAME.vue', () => {
  test('render test', () => {
    const wrapper = mount(() => <$NAME>{AXIOM}</$NAME>)

    expect(wrapper.text()).toEqual(AXIOM)
  })
})
EOF

cat > $DIRSTYLE/src/$INPUT_NAME.scss <<EOF
@use 'mixins/mixins' as *;
@use './button.scss';

@include b($INPUT_NAME) {
  color: red;
}
EOF

echo "export * from './$INPUT_NAME'" >> $DIRCNAME/index.ts
echo "@use './$INPUT_NAME.scss';" >> $DIRSTYLE/src/index.scss
